<template>
  <view>
    <view class="nav-wrap">
      <u-icon
        class="icon"
        color="rgb(0, 0, 0)"
        size="20"
        name="arrow-left"
        @click="goback"
      ></u-icon>
      <view class="text">体检报告</view>
    </view>
    <view class="report-search-box">
      <view class="city-box">
        <Address @determine="confirmCityPicker"></Address>
      </view>
      <view class="search-box">
        <u--input
          v-model="hospitalSearchKey"
          @input="updateHospitalList"
          shape="circle"
          border="surround"
          prefixIcon="search"
          style="background-color: rgba(243, 244, 248, 1)"
          placeholder="搜体检机构"
        />
      </view>
    </view>
    <view class="hospital-wrap">
      <view class="hospital-table" v-for="item in hospitalList" :key="item.id">
        <view class="hospital-cell content">
          <view class="content-title"> {{ item.title }} </view>
          <view class="content-addr"> {{ item.address }} </view>
        </view>
        <view class="hospital-cell icon">
          <u-icon
            class="icon"
            color="rgb(0, 0, 0)"
            size="20"
            name="arrow-right"
            @click="() => goAuth(item)"
          ></u-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import Address from "../../home/address.vue";
  import hospitalUrl from "@/api/expertConsulation";

  export default {
    components: { Address },

    props: {},

    data() {
      return {
        hospitalSearchKey: "",
        city: {},
        longitude: 30,
        latitude: 30,
        hospitalList: [],
      };
    },

    created() {
      uni.getLocation({
        type: "gcj02",
        success: ({ longitude, latitude }) => {
          this.latitude = latitude;
          this.longitude = longitude;
          this.updateHospitalList();
        },
        complete: (res) => {},
      });
    },

    methods: {
      updateHospitalList() {
        uni.showLoading();
        let data = {};
        if (this.city) {
          data = {
            ...data,
            city_id: this.city,
          };
        }
        if (this.longitude) {
          data = {
            ...data,
            lng: this.longitude,
          };
        }
        if (this.latitude) {
          data = {
            ...data,
            lat: this.latitude,
          };
        }
        this.$axios({
          url: hospitalUrl.getHospitalList,
          data: data,
        }).then((res) => {
          if (this.hospitalSearchKey) {
            this.hospitalList = res.data.arr.data.filter((hospital) => {
              return hospital.title.indexOf(this.hospitalSearchKey) !== -1;
            });
          } else {
            this.hospitalList = res.data.arr.data;
          }
          uni.hideLoading();
        });
      },

      // 选择城市点击确定
      confirmCityPicker(city) {
        this.city = city;
        this.updateHospitalList();
      },

      goAuth(hospital) {
        uni.navigateTo({
          url: `/pages/health-records/authentication/index?city=${this.city}&hospitalid=${hospital.id}`,
        });
      },

      goback() {
        uni.navigateBack({});
      },
    },

    computed: {},
  };
</script>

<style lang="scss" scoped>
  .nav-wrap {
    overflow: hidden;
    height: 87rpx;
    background: $uni-bg-color;
    line-height: 87rpx;

    & .icon {
      position: relative;
      top: 50%;
      margin: -21rpx;
      left: 30rpx;
    }

    & .text {
      width: 750rpx;
      text-align: center;
      height: 87rpx;
      line-height: 87rpx;
      font-weight: bold;
    }
  }

  .report-search-box {
    height: 100rpx;
    display: table;
    background: $uni-bg-color;
    width: 750rpx;

    & .city-box {
      display: table-cell;
      padding-left: 30rpx;
    }

    & .search-box {
      display: table-cell;
      padding-right: 30rpx;
    }
  }

  .hospital-wrap {
    background: $uni-bg-color;
    width: 750rpx;

    & .hospital-table {
      display: table;
      width: 750rpx;

      & .hospital-cell {
        display: table-cell;
        height: 120rpx;
        line-height: 120rpx;
        padding-top: 30rpx;
        border-bottom: 1rpx solid $uni-border-color;
      }

      & .content {
        width: 700rpx;
        padding-left: 30rpx;

        & .content-title {
          font-size: 16px;
          font-weight: bold;
          line-height: 150%;
          padding-bottom: 10rpx;
        }

        & .content-addr {
          font-size: $uni-font-size-sm;
          color: rgba(166, 166, 166, 1);
          line-height: 150%;
        }
      }

      & .icon {
        width: 50rpx;
        font-weight: bold;
      }
    }
  }
</style>
